<html>
<head><title>My IMFU Tools Options</title></head>
<style>
body{
background:#000
}
#wrapper{
color:#fff;
background-color: #444444;
margin:2em auto;
width:500px;
padding:1em;
border-radius:20px;
box-shadow:0px 0px 6px #ffffff;
background-image:-webkit-linear-gradient(top, #444444, #999999);
background-image:linear-gradient(top, #444444, #999999);
}
h1{
font-family:sans-serif;
font-size:1.3em
}
label{
display:block;
width:200px;
float:left;
clear:left;
text-align:right;
margin-left:-1em
}
select{
margin-left:1em;
width: 150px;
font-size:0.8em;
}
li{
list-style-type: none;
}
#creds{
width:670px;
margin-left:-335px;
position:fixed;
bottom:0;
left:50%;
}
#creds, #creds a{
color:#fff
}	  
</style>
<script type="text/javascript">

// Saves options to localStorage.
function save_options() {
  var frselect = document.getElementById("myimfufraud");
  var frvalue = frselect.children[frselect.selectedIndex].value;
  localStorage["fraudpro"] = frvalue;
  var fkselect = document.getElementById("myimfuforskin");
  var fkvalue = fkselect.children[fkselect.selectedIndex].value;
  localStorage["fskin"] = fkvalue;
  var ffselect = document.getElementById("myimfuforfont");
  var ffvalue = ffselect.children[ffselect.selectedIndex].value;
  localStorage["font"] = ffvalue;
  var stselect = document.getElementById("myimfustriptit");
  var stvalue = stselect.children[stselect.selectedIndex].value;
  localStorage["strip"] = stvalue;
  var fcselect = document.getElementById("myimfucolor");
  var fcvalue = fcselect.children[fcselect.selectedIndex].value;
  localStorage["color"] = fcvalue;
  var gpselect = document.getElementById("myimfugroup");
  var gpvalue = gpselect.children[gpselect.selectedIndex].value;
  localStorage["groupp"] = gpvalue;
  var fpselect = document.getElementById("myimfuforp");
  var fpvalue = fpselect.children[fpselect.selectedIndex].value;
  localStorage["forp"] = fpvalue;
  var skselect = document.getElementById("myimfustick");
  var skvalue = skselect.children[skselect.selectedIndex].value;
  localStorage["stick"] = skvalue;
  var bgselect = document.getElementById("myimfubadges");
  var bgvalue = bgselect.children[bgselect.selectedIndex].value;
  localStorage["badges"] = bgvalue;
  var prselect = document.getElementById("myimfuprod");
  var prvalue = prselect.children[prselect.selectedIndex].value;
  localStorage["prodt"] = prvalue;

  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  var fraudst = localStorage["fraudpro"];
  if (!fraudst) {
    return;
  }
  var frselect = document.getElementById("myimfufraud");
  for (var i = 0; i < frselect.children.length; i++) {
    var child = frselect.children[i];
    if (child.value == fraudst) {
      child.selected = "true";
      break;
    }
  }
  var skinst = localStorage["fskin"];
  if (!skinst) {
    return;
  }
  var fkselect = document.getElementById("myimfuforskin");
  for (var i = 0; i < fkselect.children.length; i++) {
    var child = fkselect.children[i];
    if (child.value == skinst) {
      child.selected = "true";
      break;
    }
  }
  var fontst = localStorage["font"];
  if (!fontst) {
    return;
  }
  var ffselect = document.getElementById("myimfuforfont");
  for (var i = 0; i < ffselect.children.length; i++) {
    var child = ffselect.children[i];
    if (child.value == fontst) {
      child.selected = "true";
      break;
    }
  }
  var stripst = localStorage["strip"];
  if (!stripst) {
    return;
  }
  var stselect = document.getElementById("myimfustriptit");
  for (var i = 0; i < ffselect.children.length; i++) {
    var child = stselect.children[i];
    if (child.value == stripst) {
      child.selected = "true";
      break;
    }
  }
  var colorst = localStorage["color"];
  if (!colorst) {
    return;
  }
  var fcselect = document.getElementById("myimfucolor");
  for (var i = 0; i < fcselect.children.length; i++) {
    var child = fcselect.children[i];
    if (child.value == colorst) {
      child.selected = "true";
      break;
    }
  }
  var groupst = localStorage["groupp"];
  if (!groupst) {
    return;
  }
  var gpselect = document.getElementById("myimfugroup");
  for (var i = 0; i < gpselect.children.length; i++) {
    var child = gpselect.children[i];
    if (child.value == groupst) {
      child.selected = "true";
      break;
    }
  }
  var groupst = localStorage["groupp"];
  if (!groupst) {
    return;
  }
  var gpselect = document.getElementById("myimfugroup");
  for (var i = 0; i < gpselect.children.length; i++) {
    var child = gpselect.children[i];
    if (child.value == groupst) {
      child.selected = "true";
      break;
    }
  }
  var forpst = localStorage["forp"];
  if (!forpst) {
    return;
  }
  var fpselect = document.getElementById("myimfuforp");
  for (var i = 0; i < fpselect.children.length; i++) {
    var child = fpselect.children[i];
    if (child.value == forpst) {
      child.selected = "true";
      break;
    }
  }
  var stickst = localStorage["stick"];
  if (!stickst) {
    return;
  }
  var skselect = document.getElementById("myimfustick");
  for (var i = 0; i < skselect.children.length; i++) {
    var child = skselect.children[i];
    if (child.value == stickst) {
      child.selected = "true";
      break;
    }
  }
  var badgest = localStorage["badges"];
  if (!badgest) {
    return;
  }
  var bgselect = document.getElementById("myimfubadges");
  for (var i = 0; i < bgselect.children.length; i++) {
    var child = bgselect.children[i];
    if (child.value == badgest) {
      child.selected = "true";
      break;
    }
  }
  var prodst = localStorage["prodt"];
  if (!prodst) {
    return;
  }
  var prselect = document.getElementById("myimfuprod");
  for (var i = 0; i < prselect.children.length; i++) {
    var child = prselect.children[i];
    if (child.value == prodst) {
      child.selected = "true";
      break;
    }
  }
}

</script>

<body onload="restore_options()">
 <div id="wrapper"> 
 <h1>My IMFU Options</h1> 
 <form>
 <ul>
   <li><label for="fraud">Fraud Protection</label>
   <select name="fraudpro" id="myimfufraud" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="skin">Forum Skin</label>
   <select name="skin" id="myimfuforskin" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="font">Fix Forum Fonts</label>
   <select name="font" id="myimfuforfont" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="strip">Strip Page Titles</label>
   <select name="strip" id="myimfustriptit" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="color">Color Site Sections</label>
   <select name="color" id="myimfucolor" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="groupp">Group Posting Tools</label>
   <select name="groupp" id="myimfugroup" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="forp">Forum Posting Tools</label>
   <select name="forp" id="myimfuforp" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="stick">Hide Stickers</label>
   <select name="stick" id="myimfustick" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="badges">Hide Badges</label>
   <select name="badges" id="myimfubadges" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="prodt">Show Product Tools</label>
   <select name="prodt" id="myimfuprod" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
 </ul>
 </form> 
<button onclick="save_options()">Save</button>
<span id="status"></span>
</div>
<div id="creds">
<p>Some Icons by <a href="http://www.famfamfam.com/lab/icons/silk/">Mark James</a> - Some Icons by <a href="http://p.yusukekamiyamane.com/">Yusuke Kamiyamane</a> - Forum Icons from <a href="http://userstyles.org/styles/5195">whatrevolution</a><br></p>
</div>
<br>
</body>
</html>